<template>
    <div class="details-container">
        <CBanner/>
        <div class="details-warp">
            <div class="details-title">{{ results.title }}</div>
            <div class="details-header flex flex-ac">
                <div class="flex flex-ac" v-if="!screenFlag">
                    <span class="details-name" @click="toPage('Home')">首页</span>
                    <span class="details-arrows">></span>
                    <span class="details-name" @click="toPage('College')">看看宇宙学院</span>
                    <span class="details-arrows">></span>
                    <span class="details-name">学院详情</span>
                </div>
                <div class="flex flex-ac">
                    <img class="details-img" :src="$imgUrl(results.kankan_avatar)" alt="" />
                    <span class="details-name">{{ results.kankan_author }}</span>
                    <img class="details-eye" src="@/assets/img/information/eye.png" alt="" />
                    <span class="details-name">{{ results.view_count }}</span>
                </div>
                <span class="details-date">{{ results.create_time_year_month +'-'+ results.create_time_day}}</span>
            </div>
            <div class="details-video" :style="{height: results.video?'': 0,marginTop:results.video?'': 0}">
                <video class="video-js" :id="playerId" :autoplay="false" :loop="false" :controls="true" :bigPlayButton="true"></video>
            </div>
            <div class="details-content flex jc-sb">
                <div class="details-content-lf">
                    <div class="details-name">内容详情</div>
                    <div class="details-txt" v-html="results.content"></div>
                </div>
                <div class="details-content-rg" v-if="!screenFlag">
                    <div class="details-more">更多推荐</div>
                    <div v-for="(item,index) in mores" :key="index" class="details-box flex flex-ac jc-sb" @click="toPage('UniverseDetails',{id: item.id})">
                        <img class="details-rg-img" :src="$imgUrl(item.image)" alt="" />
                        <span class="info-rg-content nowrap2">{{ item.title }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router'
import { getCollegeDetails, getCollegeRecommend} from '@/api/index.js'
import CBanner from '@/views/college/component/banner/index.vue'
import {imgUrlEvent} from '@/utils/imgUrls'
import videojs from "video.js";
import { watch } from 'vue';
const screenFlag = ref(window.innerWidth<=768);
const route = useRoute();
const router = useRouter();
const playerId = ref('playerId');
const player = ref(null);
const id = ref();
const mores = ref([]);
const results = ref({
    title:'',
    content: '',
    image:'',
    view_count: 0,
    create_time_year_month: '',
    create_time_day:'',
    kankan_avatar:'',
    kankan_author:''
});

//播放视频
const play = (url) =>{
    if(player.value){
        player.value.src({
          src: url, 
          type: 'video/mp4'
        });
        player.value.load();
        setTimeout(()=>{
            if(player.value.play()){
                player.value.pause();
            }
        },10)
    }else{
        player.value = videojs(playerId.value, {autoplay: true});
        player.value.src(url);
    }
}

//监听路由参数变化
watch(() => route,(newRoute, oldRoute) => {
        if(id.value){
            id.value = route.query.id;
            if(player.value&&player.value.play()){
                player.value.pause();
            }
            getMoreArticle();
            getArticleDetail();
        }
    },
    { deep: true, immediate: true }
);

//路由跳转
const toPage = (name,params) =>{
    router.push({ name ,query: params})
}

//获取文章详情
const getArticleDetail  = () =>{
    getCollegeDetails({id: id.value}).then(res => {
        // res.data.video = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/wap2appvsnative.mp4'
        results.value = res.data;
        if(res.data.video){
            play(imgUrlEvent(res.data.video))
        }
    })
}
//更多
const getMoreArticle = () =>{
    getCollegeRecommend({id: id.value}).then(res => {
        mores.value = res.data;
    })
}

// 监听窗口大小变化
const addEvent = () =>{
  window.addEventListener('resize', function() {
        screenFlag.value = window.innerWidth <=768;
    });
}

//挂载
onMounted(() => {
    id.value = route.query.id;
    addEvent();
    getMoreArticle();
    getArticleDetail();
})

onBeforeUnmount(()=>{
    if (player.value) {
        player.value.dispose();
    }
})
</script>

<style scoped lang="less">
@import './index.less';
</style>